<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h1> {{msg}}</h1>
    <!--
    1.vue中常见的别名按键
        enter 回车
        tab  制表键
        delete 删除键
        esc  回退键
        space  空格键
        up  上键
        down  下键
        left  左键
        right  右键
        ctrl
     2.vue未提供别名的按键，可以使用key值去绑定键盘事件
    -->
    <input type="text" @keyup="keyInfo"/>
    <hr/>
    <input type="text" @keyup.enter="keyInfoBind"/>
    <hr/>
    <!--    可以链式调用 ctrl+y组合键触发-->
    <input type="text" @keyup.ctrl.y="keyInfoBind"/>

</div>
<script type="text/javascript">
    Vue.config.printWarnings = false;
    const vm = new Vue({
        el: '#root',
        data: {
            msg: '键盘事件',
            clickTip: '提交'
        },
        methods: {
            // 事件处理函数
            keyInfo(event) {

                if (event.keyCode !== 13) {
                    return;
                }
                console.log(event.target.value);
            },
            keyInfoBind(event) {
                console.log(event.target.value);
            },
        }
    });
</script>
</body>

</html>